<template>
  <view class="category">
    <!-- 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 内容 -->
    <view class="mini">
      <!-- 左侧导航 -->
      <view class="menu">
        <view
          @click="handleItemSelect(index)"
          :class="['cat-title', current === index ? 'active' : '']"
          v-for="(item, index) in menus"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <!-- 右侧商品列表 -->
      <view class="content">
        <view v-for="item1 in goods" :key="item1.cat_id" class="goods-group">
          <!-- 商品标题 -->
          <view class="goods-title">
            {{ item1.cat_name }}
          </view>
          <!-- 商品列表 -->
          <view class="goods-list">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
            >
              <!-- 商品图片 -->
              <u-image
                height="120rpx"
                width="120rpx"
                :src="item2.cat_icon"
              ></u-image>
              <!-- 商品名称 -->
              <view class="goods-name">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [],
      // 控制左侧菜单选中的索引
      current: 0,
      goods: [],
      menus: [],
    };
  },
  onLoad() {
    // 这是一个很普通的全局变量，它不会出现在 Appdata 中 ，大大减少了不用的数据，
    this.categories = [];

    // 获取缓存数据 ""
    const storeCategory = uni.getStorageSync("categories");

    // 判断 该缓存是否存在即可
    if (storeCategory) {
      // 有缓存
      // 判断缓存数据有没有过期 重要   10s
      // 时间戳 单位 是 毫秒
      if (Date.now() - storeCategory.time > 1000 * 10) {
        // 过期 重新发送请求
        this.getCategories();
      } else {
        // 没有过期 可以使用缓存
        this.categories = storeCategory.data;
        this.menus = this.categories.map((item) => item.cat_name);

        this.goods = this.categories[this.current].children;
      }
    } else {
      // 发送请求 获取数据
      this.getCategories();
    }
  },
  methods: {
    async getCategories() {
      const res = await this.$u.get("/categories");
      this.categories = res.message;

      // 把数据存入到缓存中
      uni.setStorageSync("categories", {
        data: this.categories,
        time: Date.now(),
      });

      this.menus = this.categories.map((item) => item.cat_name);

      this.goods = this.categories[this.current].children;
    },
    // 左侧标题的点击事件
    handleItemSelect(current) {
      this.current = current;
      this.goods = this.categories[this.current].children;
    },
  },
};
</script>

<style lang="scss">
.category {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .mini {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 左侧导航栏
    .menu {
      background-color: #f3f3f3;
      width: 182rpx;
      overflow: auto;
      .cat-title {
        padding: 15rpx;
        text-align: center;
      }
    }

    // 左侧标题选中的样式
    .active {
      background-color: $globalColor;
      color: #fff;
    }

    // 右侧内容
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        // 标题
        .goods-title {
          text-align: center;
          margin-top: 10px;
        }
        //内容
        .goods-list {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 15rpx 0;
            .goods-name {
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>